﻿<%@ Page Title="Business Card" Language="C#" MasterPageFile="~/GeneralMaster.master" AutoEventWireup="true"
    CodeBehind="BusinessCard.aspx.cs" Inherits="ShopOnline.BusinessCard" ValidateRequest="false" Theme="ShopOnline" %>

<%@ Register Assembly="ShopOnline" Namespace="ShopOnline.Controls" TagPrefix="cc" %>
<%@ Register TagName="BusinessCardList" Src="~/Controls/ShopOnline/BusinessCardList.ascx" TagPrefix="cc" %>
<%@ Register Src="~/Controls/Common/DataPagerCtrl.ascx" TagName="DataPager" TagPrefix="uc" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <script type="text/javascript" src="scripts/fileuploader.js"></script>
    <script type="text/javascript" src="scripts/jColor/jscolor.js"></script>
    <script type="text/javascript" src="scripts/setTextColor.js"></script>
    <script type="text/javascript" src="scripts/jquery.smartWizard-2.0.js"></script>
    <link href="css/smart_wizard.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />


    <script type="text/javascript">
        var defaultLabel = 'double click to edit content';
        var defaultBlank = '&nbsp;&nbsp;';
        var webURL = '<%= POSSystem.BLL.Utilities.GetConfigAppSetting("BusinessCardArchive") %>';

        function changeBorder(val) {
            $('.workspace .businessCard').removeClass('roundCorner');
            if (val == 'round')
                $('.workspace .businessCard').addClass('roundCorner');
            else if(val == 'none')
                $('.workspace .businessCard').css('border-color', 'transparent');
            else
                $('.workspace .businessCard').css('border-color', 'black');
        }

        function makeEditable(selector) {
            $(selector).addClass('editable').draggable({ containment: 'parent', start: function () { $('.bcselected').removeClass('bcselected'); $(this).addClass('bcselected'); } });
            $(selector).click(function (e) {
                $('.bcselected').removeClass('bcselected');
                $(this).addClass('bcselected');

                getStyle();

                agent = jQuery.browser;
                if (agent.msie) {
                    event.cancelBubble = true;
                } else {
                    e.stopPropagation();
                }
            });

            $(selector).find('span[class=labelContent]').blur(function () {
                $(this).attr('contentEditable', false);
                $(this).parent().draggable({ containment: 'parent', disabled: false }).removeClass('editing');
            });

            $(selector).find('span[class=labelContent]').dblclick(function (e) {
                $('.editing').removeClass('editing');
                $(this).parent().draggable({ disabled: true }).addClass('editing');
                $(this).attr('contentEditable', true);

                agent = jQuery.browser;
                if (agent.msie) {
                    event.cancelBubble = true;
                } else {
                    e.stopPropagation();
                }
            });
        }

        function makeImageEditable(selector) {
            $(selector).addClass('editable').draggable({ containment: 'parent', start: function () { $('.selected').removeClass('bcselected'); $(this).addClass('bcselected'); } });
            $(selector).click(function (e) {
                $('.bcselected').removeClass('bcselected');
                $(this).addClass('bcselected');
                agent = jQuery.browser;
                if (agent.msie) {
                    event.cancelBubble = true;
                } else {
                    e.stopPropagation();
                }
            });
        }

        function leaveAStepCallback(obj) {
            var step_num = obj.attr('rel');
            if (step_num == 1) {
                if ($('.bcContainerSelected').length == 0 && !$('.blankTemplate input').attr('checked')) {
                    showErrorAlert("All For You Online", "Please select a template", 8000);
                    return false;
                }

                if ($('.blankTemplate input').attr('checked')) {
                    $('#divCardFront .bccontent').html('');
                    $('#divCardBack .bccontent').html('');
                }
                else {
                    if ($('.bcContainerSelected .businessCard').hasClass('roundCorner')) {
                        changeBorder('round');
                        $('#rdRoundCorner').click();
                    }
                    else if ($('.bcContainerSelected .businessCard').css("border-color") == "transparent") {
                        changeBorder('none');
                        $('#rdNone').click();
                    }
                    else {
                        changeBorder('normal');
                        $('#rdNormal').click();
                    }

                    $('#divCardFront .businessCard').css({ "background-color": $('.bcContainerSelected .bcContainerFrontSide .businessCard').css("background-color") });
                    $('#divCardFront .businessCard').css({ "border-color": $('.bcContainerSelected .bcContainerFrontSide .businessCard').css("border-color") });
                    $('#divCardFront .businessCard').css({ "background-image": $('.bcContainerSelected .bcContainerFrontSide .businessCard').css("background-image") });
                    $('#divCardFront .bccontent').html($('.bcContainerSelected .businessCard .bccontent').html());

                    $('#divCardBack .businessCard').css({ "background-color": $('.bcContainerSelected .bcContainerBackSide .businessCard').css("background-color") });
                    $('#divCardBack .businessCard').css({ "background-image": $('.bcContainerSelected .bcContainerBackSide .businessCard').css("background-image") });
                    $('#divCardBack .businessCard').css({ "border-color": $('.bcContainerSelected .bcContainerBackSide .businessCard').css("border-color") });
                    $('#divCardBack .bccontent').html($('.bcContainerSelected .bcContainerBackSide .businessCard .bccontent').html());

                    makeEditable($('#divCardFront .businessCard .bccontent .bcObject'));
                    makeEditable($('#divCardBack .businessCard .bccontent .bcObject'));
                }
            }
            return true;
        }

        function showAStepCallback(obj) {
            var step_num = obj.attr('rel');
            if (step_num == 3) {
                $('#divCardFrontPreview').html($('#divCardFront').html());
                $('#divCardBackPreview').html($('#divCardBack').html());

                $('#divCardFrontPreview .bccontent').addClass('bccontentreadonly');
                $('#divCardBackPreview .bccontent').addClass('bccontentreadonly');

                $('#divCardFrontPreview .editable').removeClass('editable');
                $('#divCardBackPreview .editable').removeClass('editable');

                $('#divCardFrontPreview .bcselected').removeClass('bcselected');
                $('#divCardBackPreview .bcselected').removeClass('bcselected');

                $('#divCardFrontPreview .editing').removeClass('editing');
                $('#divCardBackPreview .editing').removeClass('editing');

                $('#divCardFrontPreview .cardSize').remove();
                $('#divCardBackPreview .cardSize').remove();
            }
            return true;
        }

        function getBusinessCardData() {
            $('#<%= hidFront.ClientID %>').val($('#divCardFrontPreview').html());
            $('#<%= hidBack.ClientID %>').val($('#divCardBackPreview').html());
            $('#<%= hidPrice.ClientID %>').val($('.price').html());
        }

        function ddlPapers_onchange(ddl) {
            if ($('#<%= txtQuantity.ClientID %>').val() == "") {
                showErrorAlert('All For You Online', 'Please specify the quantity you want to purchase.', 8000);
                return;
            }

            PageMethods.GetPrice(parseInt($('#<%= ddlPapers.ClientID %>').val()), parseInt($('#<%= txtQuantity.ClientID %>').val()), function (results) {
                $('.price').html(results);
            });
        }

        function finish() {
            getBusinessCardData();
            if ($('#<%= txtQuantity.ClientID %>').val() == "") {
                showErrorAlert('All For You Online', 'Please specify the quantity you want to purchase.', 8000);
                return;
            }
            $('#<%= btnAddToCart.ClientID %>').click();
        }

        function initBusinessCard(index) {
            if (index > 0) {
                $('#wizard').smartWizard({
                    transitionEffect: 'slideleft',
                    onLeaveStep: leaveAStepCallback,
                    onShowStep: showAStepCallback,
                    visibleFinishButton: true,
                    onFinish: finish,
                    selected: index,
                    enableFinishButton: true
                });
            }
            else {
                $('#wizard').smartWizard({
                    transitionEffect: 'slideleft',
                    onLeaveStep: leaveAStepCallback,
                    onShowStep: showAStepCallback,
                    visibleFinishButton: true,
                    onFinish: finish
                });
            }

            $("#accordion").accordion({
			    fillSpace: true
		    });

            $('.border-option input[type=radio]').click(function () {
                changeBorder($(this).val());
            });

            $('.businessCard .bccontent').click(function () { $('.bcselected').removeClass('bcselected'); });

            $('#btnAddLabel').click(function () {
                var html = '<div class="bcObject"><span class="labelContent">' + defaultLabel + '</span></div>';
                var selector = $(html);
                $('.workspace[active=1] .businessCard .bccontent').append(selector);
                makeEditable(selector);
            });

            $('#btnRemoveLabel').click(function () {
                if (confirm("Are you sure to delete this label?"))
                    $('.bcselected').remove();
            });
             
            $('.fontText').change(function () {
                var font = $(this).val();
                $('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css({ "font-family": font });
            });

            $('.fontsize').change(function setSize() {
                var fontsize = $(this).val();
                $('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css({ "font-size": fontsize + "px", "line-height": fontsize + "px" });
            });

            var uploader = new qq.FileUploader({
                // pass the dom node (ex. $(selector)[0] for jQuery users)  -- change this 
                element: document.getElementById('background-upload'),
                // path to server-side upload script
                
                action: 'FileUploadHandler.upload?w=352&h=204',
                onComplete: function (id, fileName, responseJSON) {
                    //set background to front-card
                    $(".qq-upload-drop-area").hide();
                    $(".workspace[active=1] .businessCard").css("background-image", "url(" + webURL + responseJSON.newfilename + ")");
                },
                template: '<div class="qq-uploader">' +
                '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
                '<div class="qq-upload-button" style="margin-top:10px">' + '<button id="btnAddLabel" type="button" class="button"><span><span>Upload Picture</span></span></button>' + '<br />' +
                '</div>' +
                '<ul style="display:none" class="qq-upload-list"></ul>' +
                '</div>',
                debug: true
            });

            //client side - Javascript code
            var logoUploader = new qq.FileUploader({
                // pass the dom node (ex. $(selector)[0] for jQuery users)  -- change this 
                element: document.getElementById('logo-uploader'),
                // path to server-side upload script
                action: 'FileUploadHandler.upload?type=logo',
                template: '<div class="qq-uploader">' +
                '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
                '<div class="qq-upload-button">' + '<button id="btnAddLabel" type="button" class="button"><span><span>Add Image</span></span></button>' + '<br />' +
                '</div>' +
                '<ul style="display:none" class="qq-upload-list"></ul>' +
                '</div>',
                onComplete: function (id, fileName, responseJSON) {
                    var html = '<img  class="bcObject" src="' + webURL + responseJSON.newfilename + '" />';
                    var selector = $(html);
                    $(".workspace[active=1] .businessCard .bccontent").append(selector);
                    makeEditable(selector);
                },
                debug: true
            });

            $(".fontcolor").change(function () {
                setColor("#" + $(this).val());
            }); 

            $(".backcolor").change(function () {
                setBackColor("#" + $(this).val());
            });

            $(".bordercolor").change(function () {
                setBorderColor("#" + $(this).val());
            });

            $('.cardSwitch').click(function () {
                $('.workspace[active=1]').attr('active', '0').hide();
                $('#' + $(this).attr('designid')).attr('active', '1').show("slide", { direction: "left" }, 200);
                $('.activedesgin').removeClass('activedesgin');
                $(this).addClass('activedesgin');
            });

            $('.bcContainer').click(function () {
                $('.bcContainerSelected').removeClass('bcContainerSelected');
                $(this).addClass('bcContainerSelected');
                $('.blankTemplate input').attr('checked', false);
            });

            $('.blankTemplate input').change(function () {
                if ($(this).attr('checked') == 'checked')
                    $('.bcContainerSelected').removeClass('bcContainerSelected');
            });

            if (index > 0) {
                $('#divCardFront').html($('#<%= hidFront.ClientID %>').val()).attr('readOnline', '0');
                $('#divCardBack').html($('#<%= hidBack.ClientID %>').val()).attr('readOnline', '0');

                if ($('#divCardBack').find('.businessCard').hasClass('roundCorner')) {
                    changeBorder('round');
                    $('#rdRoundCorner').click();
                }
                else {
                    changeBorder('normal');
                    $('#rdNormal').click();
                }

                makeEditable($('#divCardFront .businessCard .bccontent .bcObject'));
                makeEditable($('#divCardBack .businessCard .bccontent .bcObject'));
            }
        }

        function setColor(color) {
            $('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css({ "color": color });
        }

        function setBackColor(color) {
            $('.workspace[active=1] .businessCard').css({ "background-color": color });
        }

        function setBorderColor(color) {
            $('.workspace .businessCard').css({ "border-color": color });
        }

        function setBold() {
            if ($('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css("font-weight") == 700)
                $('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css({ "font-weight": 400 });
            else
                $('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css({ "font-weight": 700 });
        }

        function setItalic() {
            if ($('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css("font-style") == "italic")
                $('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css({ "font-style": "normal" });
            else
                $('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css({ "font-style": "italic" });
        }

        function setUnderline() {
            if ($('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css("text-decoration") == "underline")
                $('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css({ "text-decoration": "none" });
            else
                $('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css({ "text-decoration": "underline" });
        }

        function getStyle() {
            var fontSize = $('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css("font-size").toString().replace("px", "");
            $('.fontsize').val(fontSize);
            var fontName = $('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css("font-family");
            $('.fontText').val(fontName);
            var color = $('.workspace[active=1] .businessCard .bccontent .bcselected span[class=labelContent]').css("color");
            $('.fontcolor').val(color);
        }
    </script>
    <link href="css/bc.css" rel="stylesheet" type="text/css" />
    <div class="content-box">
        <div class="border-bot">
            <div class="border-left">
                <div class="border-right">
                    <div class="left-top">
                        <div class="right-top">
                            <div class="left-bot">
                                <div class="right-bot">
                                    <div id="wizard" class="swMain">
                                        <ul>
                                            <li><a href="#step-1" class="selected">
                                                <label class="stepNumber">
                                                    1</label>
                                                <span class="stepDesc">Step 1<br />
                                                    <small>Choose Template</small> </span></a></li>
                                            <li><a href="#step-2">
                                                <label class="stepNumber">
                                                    2</label>
                                                <span class="stepDesc">Step 2<br />
                                                    <small>Design</small> </span></a></li>
                                            <li><a href="#step-3">
                                                <label class="stepNumber">
                                                    3</label>
                                                <span class="stepDesc">Step 3<br />
                                                    <small>Finish</small> </span></a></li>
                                        </ul>
                                        <div id="step-1" class="cart-step">
                                            <div style='height:540px; margin-bottom:5px; width:900px'>
                                                <div id="accordion">
                                                    <h3><a href="#">Business Card Templates</a></h3>
                                                    <div style='height:410px;'>
                                                        <cc:BusinessCardList OnNeedDataSource="lstTemplates_OnNeedDataSource" ID="lstTemplates" runat="server" AllowPaging="false" RepeatedColumns="2" RepeatLayout="Table" />
                                                        <div style='height:10px; clear:both'>&nbsp;</div>
                                                        <uc:DataPager PageSize="10" ID="dataPagerTemplates" runat="server" OnPageIndexChanged="dataPagerTemplates_OnPageIndexChanged" />
                                                    </div>
                                                    <h3><a href="#">My Business Cards</a></h3>
                                                    <div style='height:410px;'>
                                                        <cc:BusinessCardList OnNeedDataSource="lstMyCards_OnNeedDataSource" ID="lstMyCards" runat="server" AllowPaging="false" RepeatedColumns="2" RepeatLayout="Table" />
                                                        <div style='height:10px; clear:both'>&nbsp;</div>
                                                        <uc:DataPager PageSize="10" ID="dataPagerMine" runat="server" OnPageIndexChanged="dataPagerMine_OnPageIndexChanged" />
                                                        <asp:Label ID="lblNoCards" Visible="false" runat="server">Please Login to use this function.</asp:Label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div style='height:500px; margin-top:5px'>
                                                <asp:CheckBox ID='chkBlank' Text="Blank Template" class='blankTemplate' runat="server" Checked="true" />
                                            </div>
                                        </div>
                                        <div id="step-2" class="cart-step">
                                            <div class="content-divider-left">
                                                <div class="content-divider-right">
                                                    <div class="full-width">
                                                        <div class="col-wrapper">
                                                            <div class="col-main1 workarea">
                                                                <div id='divCardFront' class='workspace' active="1">
                                                                    <div class='businessCard' readonly='0'>
                                                                        <div class='bccontent'>
                                                                        </div>
                                                                    </div>
                                                                    <div class='cardSize' style='text-align: center; font-weight: bold; '>
                                                                        <span style='font-size: 14px'>(3.5''</span> <span style='color: Red'>x</span> <span
                                                                            style='font-size: 14px'>2'')</span>
                                                                    </div>
                                                                </div>
                                                                <div id='divCardBack' class='workspace' active="0" style="display: none">
                                                                    <div class='businessCard' readonly='0'>
                                                                        <div class='bccontent'>
                                                                        </div>
                                                                    </div>
                                                                    <div class='cardSize' style='text-align: center; font-weight: bold'>
                                                                        <span style='font-size: 14px'>(3.5''</span> <span style='color: Red'>x</span> <span
                                                                            style='font-size: 14px'>2'')</span>
                                                                    </div>
                                                                </div>
                                                                <div style='margin-top:20px'>
                                                                    <div designid='divCardFront' class='cardSwitch activedesgin' style='margin-left: 180px'>
                                                                        <div>
                                                                            Front Side</div>
                                                                    </div>
                                                                    <div designid='divCardBack' class='cardSwitch'>
                                                                        <div>
                                                                            Back Side</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-left sidebar">
                                                                <cc:CustomPanel ID="panelBorder" runat="server" Title="Border">
                                                                    <div style='margin-top: 5px'>
                                                                        <ul class='border-option'>
                                                                            <li>
                                                                                <input id="rdNone" type="radio" value="none" name="border" />None</li>
                                                                            <li>
                                                                                <input id="rdNormal"  checked="checked"  type="radio" value="normal" name="border" />Normal</li>
                                                                            <li>
                                                                                <input id="rdRoundCorner" type="radio" value="round" name="border" />Round Corner</li>
                                                                        </ul>
                                                                        <div style='margin-top: 5px'>
                                                                            Border color:<br />
                                                                            <input class="color bordercolor" value="000000" />
                                                                        </div>
                                                                    </div>
                                                                </cc:CustomPanel>
                                                                <br class="clear" />
                                                                <cc:CustomPanel ID="CustomPanel1" runat="server" Title="Style">
                                                                    <div style='margin-top: 5px'>
                                                                        Font size:<br />
                                                                        <select class="fontsize">
                                                                            <option>8</option>
                                                                            <option>9</option>
                                                                            <option>10</option>
                                                                            <option selected="selected">11</option>
                                                                            <option>12</option>
                                                                            <option>13</option>
                                                                            <option>14</option>
                                                                            <option>15</option>
                                                                            <option>16</option>
                                                                            <option>17</option>
                                                                            <option>18</option>
                                                                            <option>19</option>
                                                                            <option>20</option>
                                                                            <option>21</option>
                                                                            <option>22</option>
                                                                            <option>23</option>
                                                                            <option>24</option>
                                                                            <option>25</option>
                                                                            <option>26</option>
                                                                            <option>27</option>
                                                                            <option>28</option>
                                                                            <option>29</option>
                                                                            <option>30</option>
                                                                        </select>
                                                                    </div>
                                                                    <div style='margin-top: 5px'>
                                                                        Font color:<br />
                                                                        <input class="color fontcolor" value="000000" />
                                                                    </div>
                                                                    <div style='margin-top: 5px'>
                                                                        Font style:<br />
                                                                        <a href="#" onclick="setBold(); return false;">
                                                                            <img src="images/BC/format_text_bold.png" width="20px" height="20px" /></a><a href="#"
                                                                                onclick="setItalic(); return false;"><img src="images/BC/format_text_italic.png"
                                                                                    width="20px" height="20px" /></a><a href="#" onclick="setUnderline(); return false;"><img
                                                                                        src="images/BC/format_text_underline.png" width="20px" height="20px" /></a>
                                                                    </div>
                                                                    <div style='margin-top: 5px'>
                                                                        Font text:<br />
                                                                        <select class="fontText">
                                                                            <option>Arial</option>
                                                                            <option>Arial Rounded MT Bold</option>
                                                                            <option>Arnoldboecklin</option>
                                                                            <option>Brush Script MT</option>
                                                                            <option>Comic Sans</option>
                                                                            <option>Courier New</option>
                                                                            <option>Cochin</option>
                                                                            <option>Impact</option>
                                                                            <option>Gill Sans</option>
                                                                            <option>Goudy Old Style</option>
                                                                            <option>Helvetica Neue</option>
                                                                            <option>Hoefler Text</option>
                                                                            <option>Lucida Grande</option>
                                                                            <option>Marker Felt</option>
                                                                            <option>Monaco</option>
                                                                            <option>Myriad</option>
                                                                            <option>Optima</option>
                                                                            <option>Palatino</option>
                                                                            <option>Times New Roman</option>
                                                                            <option>Zapf Chancery</option>
                                                                        </select>
                                                                    </div>
                                                                </cc:CustomPanel>
                                                            </div>
                                                            <br class="clear" />
                                                        </div>
                                                        <div class="col-right sidebar">
                                                            <cc:CustomPanel ID="CustomPanel2" runat="server" Title="Content">
                                                                <div style='margin-top: 5px'>
                                                                    <ul class='content-option'>
                                                                        <li>
                                                                            <button id="btnAddLabel" type="button" class="button">
                                                                                <span><span>Add Label</span></span></button>
                                                                        </li>
                                                                        <li>
                                                                            <div id="logo-uploader">
                                                                                <noscript>
                                                                                    <p>
                                                                                        Please enable JavaScript to use file uploader.</p>
                                                                                    <!-- or put a simple form for upload here -->
                                                                                </noscript>
                                                                            </div>
                                                                        </li>
                                                                        <li>
                                                                            <button id="btnRemoveLabel" title="You can select the object you want to delete by clicking on it."
                                                                                type="button" class="button">
                                                                                <span><span>Remove&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></button>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </cc:CustomPanel>
                                                            <br class="clear" />
                                                            <cc:CustomPanel ID="CustomPanel3" runat="server" Title="Background">
                                                                <div style='margin-top: 5px'>
                                                                    <div>
                                                                        Back color:<br />
                                                                        <input class="color backcolor" value="ffffff" />
                                                                    </div>
                                                                    <div id="background-upload">
                                                                        <noscript>
                                                                            <p>
                                                                                Please enable JavaScript to use file uploader.</p>
                                                                            <!-- or put a simple form for upload here -->
                                                                        </noscript>
                                                                    </div>
                                                                </div>
                                                            </cc:CustomPanel>
                                                        </div>
                                                        <br class="clear" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="step-3" class="cart-step">
                                            <div class="content-divider-left">
                                                <div class="content-divider-right">
                                                    <div class="full-width">
                                                        <div class="col-wrapper">
                                                            <div class="col-main1 preview">
                                                                <div id='divCardFrontPreview' class='workspace' active="0">
                                                                    <div class='businessCard' readonly='1'>
                                                                        <div class='bccontent'>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div id='divCardBackPreview' class='workspace' active="0" style='margin-top: 20px'>
                                                                    <div class='businessCard' readonly='1'>
                                                                        <div class='bccontent'>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-left sidebar">
                                                                <cc:CustomPanel ID="CustomPanel4" runat="server" Title="Note">
                                                                    <div style='margin: 5px'>
                                                                        Click Finish to add your business card to shopping cart. <br /><br />You can go back to previous steps to edit your design.
                                                                    </div>
                                                                </cc:CustomPanel>
                                                                <br class="clear" />
                                                                <img src="images/bnr_nowAccepting_150x60.gif" />
                                                            </div>
                                                            <br class="clear" />
                                                        </div>
                                                        <div class="col-right sidebar">
                                                            <cc:CustomPanel ID="CustomPanel5" runat="server" Title="Order Info">
                                                                    <div style='margin-top: 5px'>
                                                                        Description<br />
                                                                        <asp:TextBox class='tb150' ID='txtName' runat="server" Text="Business Card"></asp:TextBox><br /><br />
                                                                        Paper<br />
                                                                        <asp:DropDownList onchange='ddlPapers_onchange();' class='tb150' style='height:28px' ID='ddlPapers' runat="server"></asp:DropDownList><br /><br />
                                                                        Quantity(box of 100)<br />
                                                                        <asp:TextBox class='tb150' onchange='ddlPapers_onchange();' ID='txtQuantity' runat="server" Text="100"></asp:TextBox><br /><br />
                                                                        Unit Price
                                                                        <span class='price'>
                                                                            <asp:Literal ID="litPrice" runat="server"></asp:Literal>
                                                                        </span>
                                                                    </div>
                                                             </cc:CustomPanel>
                                                             <br class="clear" />
                                                             <cc:CustomPanel ID="adminPanel" runat="server" Title="Admin">
                                                                    <div style='margin-top:5px'>
                                                                        <button onclick='getBusinessCardData();' runat="server" onserverclick="btnSaveTemplate_OnClick" id="btnSaveTemplate" title="Save as Business Card Template"
                                                                                type="button" class="button">
                                                                        <span><span>Save as Template</span></span></button>
                                                                    </div>
                                                             </cc:CustomPanel>
                                                        </div>
                                                        <br class="clear" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <asp:Button ID="btnAddToCart" OnClick="btnAddToCart_OnClick" style='display:none' runat="server" />
        <asp:HiddenField ID="hidFront" runat="server" />
        <asp:HiddenField ID="hidBack" runat="server" />
        <asp:HiddenField ID="hidPrice" runat="server" />
</asp:Content>
